﻿<div class="form-group">
    <label data-bind="text: key" class="col-sm-3 control-label"></label>
    <div class="col-sm-9">
        <div class="input-rules">
            <div class="input-rule" data-bind="foreach: value">
                <!-- <div data-bind="text: operators"></div> -->
                <div class="input-group">
                    <select class="form-control key" data-bind="options: $component.fieldsOfCurrentFolder, 
                    optionsText: 'displayName', 
                    optionsValue: 'name', 
                    event: { 
                        change: function(data, event){ 
                            chooseField($parent, event); 
                        }
                    }, value:key"></select>
                    <span class="input-group-addon separator"></span>
                    <select class="form-control comparison" data-bind="options:operators, value:comparison"></select>

                    <span class="input-group-addon separator"></span>

                    <input data-bind="value: value" type="text" class="form-control value">

                    <span class="input-group-btn"><a class="btn btn-default" href="#" data-bind="click: $component.add, tooltip: Kooboo.text.tooltip.addAnotherRuleAfterThis"><i class="fa fa-plus"></i></a></span>

                    <span class="input-group-btn"><a class="btn btn-default" href="#" data-bind="click: $component.remove.bind($component, $index), tooltip: Kooboo.text.common.remove"><i class="fa fa-minus"></i></a></span>
                </div>
                <!-- ko if: $component.value().length > 1 -->
                <div class="input-group operator">
                    <select class="form-control">
                        <option selected="selected" data-bind="text: Kooboo.text.logical.and">AND</option>
                    </select>
                </div>
                <!-- /ko -->
            </div>
            <!-- ko if: value().length === 0 -->
            <a class="btn btn-default" href="#" data-bind="click:add, tooltip: Kooboo.text.common.add">
                <i class="fa fa-plus"></i>
            </a>
            <!-- /ko -->

        </div>
    </div>
</div>